<template>
  <div class="wrap">
    <div class="turntable">
      <div
        :class="'slices ' + oddEven + (count === 2 ? ' slices-tow' : '')"
        :style="turntableStyle"
      >
        <div
          v-for="(item, index) in count"
          :key="index"
          class="slice"
          :style="{
            transform: 'rotate(' + (rotateDeg * index - offsetDeg) + 'deg) skewX(-' + skewXDeg + 'deg)',
            display: count > 1 ? '' : 'none'
          }"
        ></div>

        <div :class="'turntable-values ' + oddEven">
          <div
            v-for="(item, index) in count"
            :key="index"
            class="value"
            :style="{
              transform: 'translate(-50%, -50%) rotate(' + (rotateDeg * index + rotateDeg / 2) + 'deg)'
            }"
          >
            <div>现金</div>
            <div>{{ item }}{{ item }}{{ item }}</div>
          </div>
        </div>
      </div>

      <div class="turntable-button">
        <div class="pointer"></div>
        <div class="button" @click="startRotate">立即抽奖</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'Turntable',
})
export default class extends Vue {
  private count = 4

  get oddEven(): string {
    return this.count % 2 === 0 ? 'even' : 'odd'
  }

  get rotateDeg(): number {
    if (this.count > 1) {
      return 360 / this.count
    } else {
      return 0
    }
  }

  get skewXDeg(): number {
    if (this.rotateDeg <= 90) {
      return 90 - this.rotateDeg
    } else if (this.rotateDeg <= 180) {
      const extra = Math.abs(this.rotateDeg) - 90
      return Math.abs(this.rotateDeg) + Math.abs(extra)
    } else {
      return 0
    }
  }

  get offsetDeg(): number {
    if (this.rotateDeg <= 90) {
      return this.skewXDeg
    } else if (this.rotateDeg <= 180) {
      return -(Math.abs(this.rotateDeg) - 90)
    } else {
      return 0
    }
  }

  private transitionDuration = 5000

  private rotateing = false

  private randomDeg = 0

  private turntableStyle = {}

  // 生成随机数
  getRandomRotate(minNum: number, maxNum: number): number {
    return Number((Math.random() * (maxNum - minNum + 1) + minNum).toFixed(2))
  }

  startRotate() {
    if (this.rotateing) return
    this.rotateing = true

    // this.turntableStyle = {}

    setTimeout(() => {
      const randomRotate = this.getRandomRotate(7, 10)
      const randomDeg = randomRotate * 360
      // 获取还有多少度转满一圈
      let exrta = 360 - (this.randomDeg % 360)
      exrta = exrta === 360 ? 0 : exrta
      this.randomDeg = this.randomDeg + randomDeg + exrta
      this.turntableStyle = {
        // cubic-bezier(.85,1.06,.59,.99)
        transition: `transform ${this.transitionDuration}ms ease`,
        transform: `rotate(${this.randomDeg}deg)`,
      }
      setTimeout(() => {
        this.rotateing = false
      // this.turntableStyle = {}
      }, this.transitionDuration + 1000)
    }, 16)
  }
}
</script>

<style lang="scss">
.wrap {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

$size: 300px;
$light-color: rgb(217, 232, 248);
$middle-color: rgb(65, 156, 231);
$dark-color: rgb(50, 138, 212);
$deep-color: rgb(10, 86, 171);
$button-wrap-size: $size / 3;
$button-size: $size / 4;
$pointer-width: 30px;

.turntable {
  width: $size;
  height: $size;
  border-radius: $size;
  overflow: hidden;
  position: relative;
  border: 10px solid $dark-color;
  background-color: $dark-color;
  // transition: transform 5000ms cubic-bezier(.78,1.04,.61,.99);
}

.slices {
  width: $size;
  height: $size;
  .slice {
    width: $size;
    height: $size;
    // background-color: red;
    // transform: rotate(0deg) skewX(-60deg);
    transform-origin: 0% 100%;
    position: absolute;
    left: $size / 2;
    bottom: $size / 2;
  }
}

.slices.odd {
  .slice {
    &:nth-child(3n + 1) {
      background-color: $dark-color;
    }

    &:nth-child(3n + 2) {
      background-color: $middle-color;
    }

    &:nth-child(3n) {
      background-color: $light-color;
    }
  }
}

.slices.even {
  .slice {
    &:nth-child(2n) {
      background-color: $light-color;
    }

    &:nth-child(2n + 1) {
      background-color: $dark-color;
    }
  }
}

.slices.slices-tow {
  width: $size;
  height: $size;
  display: flex;
  .slice {
    position: relative;
    transform: none!important;
    left: 0!important;
    width: $size / 2;
    height: $size * 2;
    &:nth-child(2n) {
      background-color: $dark-color;
    }

    &:nth-child(2n + 1) {
      background-color: $light-color;
    }
  }
}

.turntable-values {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  .value {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: $size - 40px;
    font-size: 12px;
  }
}

.turntable-values.odd {
  .value {
    &:nth-child(3n + 1) {
      color: #fff;
    }

    &:nth-child(3n + 2) {
      color: #fff;
    }

    &:nth-child(3n) {
      color: $middle-color;
    }
  }
}

.turntable-values.even {
  .value {
    &:nth-child(2n) {
      color: $dark-color;
    }

    &:nth-child(2n + 1) {
      color: #fff;
    }
  }
}

.turntable-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: $button-wrap-size;
  height: $button-wrap-size;
  border-radius: $button-wrap-size;
  margin-left: - $button-wrap-size / 2;
  margin-top: - $button-wrap-size / 2;
  background-color: $light-color;

  .pointer {
    position: absolute;
    top: - $button-size * 3 / 2;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -$pointer-width / 2;
    border-color: transparent;
    border-bottom-color: $deep-color;
    border-style: solid;
    border-top-width: $button-size;
    border-bottom-width: $button-size;
    border-left-width: $pointer-width / 2;
    border-right-width: $pointer-width / 2;
  }

  $inner-button-padding: 20px;
  $inner-button-size: $button-size - $inner-button-padding * 2;

  .button {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: - $button-size / 2;
    margin-top: - $button-size / 2;
    width: $inner-button-size;
    height: $inner-button-size;
    line-height: $inner-button-size / 2;
    padding: $inner-button-padding;
    border-radius: $button-size;
    background-color: $deep-color;
    cursor: pointer;
    color: #FFF;
    font-size: 15px;
    text-align: center;
    white-space: normal;
  }

}

</style>
